<template>
  <div class="app-main-container">
    <div class="df_ac mb20">
      <span
        class="pointer"
        @click="routerPush('/application/applicationCenter')"
      >{{ $t('message.yyzx') }}</span>
      <i class="ml10 mr10 el-icon-arrow-right" />
      <span
        class="pointer"
        @click="routerPush('/application/Portrayal')"
      >{{ $t('message.hyhxyx') }}</span>
    </div>
    <div class="df_ac mb20">
      <span class="h2 mr10">{{ detail.portraitName }}</span>
      <span class="placeholder9">{{ detail.conditions }}</span>
    </div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearFilters"
    >
      <template #btns>
        <el-button
          type="primary"
          :loading="exLoading"
          @click="handleEx"
        >{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <template v-for="item in propList">
        <el-table-column
          :key="item.prop"
          align="center"
          :label="item.name"
          :prop="item.code"
          :min-width="120"
          show-overflow-tooltip
        >
          <template v-if="item.name === $t('message.memberInfo')" v-slot="scope">
            <span
              class="primaryColor pointer"
              @click="handleDetail(scope.row)"
            >{{ scope.row[item.code] }}</span>
          </template>
          <template v-else v-slot="scope">
            <span>{{ scope.row[item.code] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div>
      <Paginations
        :total="totalCount"
        :page="pagination.page"
        @current-change="getList"
        @SizeChange="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { portrayalMemberList, portrayalMemberEx } from '@/api'
export default {
  data() {
    return {
      list: [],
      filters: {},
      listLoading: false,
      exLoading: false,
      totalCount: 0,
      pagination: {
        rows: 10,
        page: 1
      },
      detail: {},
      propList: [],
      queryFormConfig: {
        formItems: [
          {
            filed: 'memberInfo',
            type: 'input',
            label: this.$t('message.memberInfo')
          }
        ],
        online: true
      }
    }
  },
  created() {
    this.detail = this.$route.query
    this.getList()
  },
  methods: {
    routerPush(path) {
      this.$router.push(path)
    },
    handleDetail(row) {
      this.$router.push({
        name: 'VipDetails',
        query: {
          id: row.memberId
        }
      })
    },
    handleEx() {
      const { filters, detail } = this
      this.exLoading = true
      portrayalMemberEx({ param: { ...filters, ...detail }, id: this.$route.query.id }).then(res => {
        this.exLoading = false
        if (res.errorCode === '000000') {
          window.open(res.record.showUrl, '_blank')
        }
      }, () => {
        this.exLoading = false
      })
    },
    getList(page) {
      const { filters, pagination, detail } = this
      if (page) {
        pagination.page = page
      }
      this.listLoading = true
      portrayalMemberList({ param: { ...filters, ...detail }, pagination }).then(res => {
        this.listLoading = false
        this.list = res.recordList || []
        this.totalCount = res.totalCount
        this.propList = res.data
      }, () => {
        this.listLoading = false
      })
    },
    clearFilters() {
      this.filters = {}
      this.getList(1)
    },
    handleSizeChange(rows) {
      this.pagination.rows = rows
      this.getList(1)
    }
  }
}
</script>

<style>
</style>
